<!--列表页面-->
<template>
  <!-- 1.列表页面的版心 定宽居中 -->
  <div style="width: 1200px;margin: 0 auto;">
    <!-- 2.复制首页中有4张卡片的el-row即可    -->
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in 4" style="margin-top: 10px;">
        <el-card>
          <router-link to="/detail" style="text-decoration: none;color:#333;">
            <img src="/imgs/a.jpg" style="width:100%;height:150px;">
            <p style="height: 40px;">奶油面包</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar src="/imgs/head.jpg"></el-avatar>
            </el-col>
            <el-col :span="16" style="font-size:20px;line-height: 40px;">传奇哥</el-col>
            <el-col :span="4" style="line-height: 40px;">欧包</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>